import { useDrag } from "react-dnd"

export interface MaterailItemProps {
  name: string
  desc: string
}

function MaterailItem(props: MaterailItemProps) {
  const { name, desc } = props

  const [_, drag] = useDrag(() => ({
    type: name,
    item: { type: name },
  }))
  return (
    <div
      ref={drag}
      className="border-dashed border-[1px] border-[#000] py-[8px] px-[10px] cursor-move m-[10px] inline-block bg-white hover:bg-[#ccc]"
    >
      {desc}
    </div>
  )
}

export default MaterailItem
